---
title: "占位文本颜色"
# description: "Utilities for controlling the color of placeholder text."
description: "用于控制占位文本颜色的功能类。"
---

import plugin from 'tailwindcss/lib/plugins/placeholderColor'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'
import { Heading } from '@/components/Heading'

export const classes = {
  plugin,
  transformSelector: (selector) => (
    <>
      {selector.split('::')[0].trim().replace(/^\./, '').replace(/\\/g, '')}
      <span className="text-gray-500">::placeholder</span>
    </>
  ),
  preview: (css, { className }) => (
    <td
      className={`text-center font-medium text-base whitespace-nowrap align-middle ${className}`}
      style={css}
    >
      <div className="w-16 mx-auto">Aa</div>
    </td>
  ),
}

<!-- ## Usage -->
## 使用方法

<!-- Control the placeholder color of an element using the `placeholder-{color}` utilities. -->
使用 `placeholder-{color}` 功能类控制元素占位文本的颜色。

```html emerald
<template preview class="text-center p-6">
  <div class="max-w-xs">
    <input class="block appearance-none placeholder-gray-500 border border-emerald-400 rounded-md w-full py-3 px-4 text-gray-700 leading-5 focus:outline-none focus:ring-2 focus:ring-emerald-200" placeholder="jane@example.com">
    <input class="mt-4 block appearance-none placeholder-red-300 border border-red-400 rounded-md w-full py-3 px-4 text-gray-700 leading-5 focus:outline-none focus:ring-2 focus:ring-red-200" placeholder="jane@example.com">
  </div>
</template>

<input class="**placeholder-gray-500** ..." placeholder="jane@example.com">
<input class="**placeholder-red-300** ..." placeholder="jane@example.com">
```

<!-- ### Changing opacity -->
### 改变不透明度

<!-- Control the opacity of an element's placeholder color using the `placeholder-opacity-{amount}` utilities. -->
使用 `placeholder-opacity-{amount}` 功能类控制元素的占位文本颜色的不透明度。

```html lightBlue
<template preview>
  <div class="space-y-4">
    <div class="max-w-xs">
      <input class="block appearance-none placeholder-gray-500 placeholder-opacity-100 border border-light-blue-400 rounded-md w-full py-3 px-4 text-gray-700 leading-5 focus:outline-none focus:ring-2 focus:ring-light-blue-300" placeholder="jane@example.com">
    </div>
    <div class="max-w-xs">
      <input class="block appearance-none placeholder-gray-500 placeholder-opacity-75 border border-light-blue-400 rounded-md w-full py-3 px-4 text-gray-700 leading-5 focus:outline-none focus:ring-2 focus:ring-light-blue-300" placeholder="jane@example.com">
    </div>
    <div class="max-w-xs">
      <input class="block appearance-none placeholder-gray-500 placeholder-opacity-50 border border-light-blue-400 rounded-md w-full py-3 px-4 text-gray-700 leading-5 focus:outline-none focus:ring-2 focus:ring-light-blue-300" placeholder="jane@example.com">
    </div>
    <div class="max-w-xs">
      <input class="block appearance-none placeholder-gray-500 placeholder-opacity-25 border border-light-blue-400 rounded-md w-full py-3 px-4 text-gray-700 leading-5 focus:outline-none focus:ring-2 focus:ring-light-blue-300" placeholder="jane@example.com">
    </div>
    <div class="max-w-xs">
      <input class="block appearance-none placeholder-gray-500 placeholder-opacity-0 border border-light-blue-400 rounded-md w-full py-3 px-4 text-gray-700 leading-5 focus:outline-none focus:ring-2 focus:ring-light-blue-300" placeholder="jane@example.com">
    </div>
  </div>
</template>

<input class="placeholder-gray-500 **placeholder-opacity-100** ..." placeholder="jane@example.com">
<input class="placeholder-gray-500 **placeholder-opacity-75** ..." placeholder="jane@example.com">
<input class="placeholder-gray-500 **placeholder-opacity-50** ..." placeholder="jane@example.com">
<input class="placeholder-gray-500 **placeholder-opacity-25** ..." placeholder="jane@example.com">
<input class="placeholder-gray-500 **placeholder-opacity-0** ..." placeholder="jane@example.com">
```

<!-- Learn more in the [placeholder opacity documentation](/docs/placeholder-opacity). -->
在 [占位符不透明度文档](/docs/placeholder-opacity) 中了解更多。

<!-- ## Responsive -->
## 响应式

<!-- To control the text color of an input placeholder at a specific breakpoint, add a `{screen}:` prefix to any existing text color utility. For example, use `md:placeholder-green-500` to apply the `placeholder-green-500` utility at only medium screen sizes and above. -->
要在特定的断点处控制输入框占位文本的颜色，请在任何现有的占位文本颜色功能类前添加 `{screen}:` 前缀。例如，使用 `md:placeholder-green-500` 来仅在中等大小及以上的屏幕应用 `placeholder-green-500` 功能类。

```html
<input class="placeholder-gray-500 **md:placeholder-green-500**" placeholder="jane@example.com">
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看 [响应式设计](/docs/responsive-design) 文档。

<!-- ## Focus -->
## 焦点

<!-- To control the placeholder color of an element on focus, add the `focus:` prefix to any existing placeholder color utility. For example, use `focus:placeholder-blue-600` to apply the `placeholder-blue-600` utility on focus. -->
要控制获得焦点时元素的占位文本颜色，请在任何现有的占位文本颜色功能类前添加 `focus:` 前缀。例如，使用 `focus:placeholder-blue-600` 在获得焦点时应用 `placeholder-blue-600` 功能类。

```html indigo
<template preview class="text-center p-6">
  <div class="max-w-xs mx-auto">
    <input class="block appearance-none bg-white placeholder-gray-600 border border-indigo-200 rounded w-full py-3 px-4 text-gray-700 leading-5 focus:outline-none focus:border-indigo-400 focus:placeholder-gray-400 focus:ring-2 focus:ring-indigo-200" placeholder="jane@example.com">
  </div>
</template>

<input class="placeholder-gray-600 **focus:placeholder-gray-400** ..." placeholder="jane@example.com">
```

<!-- Focus utilities can also be combined with responsive utilities by adding the responsive `{screen}:` prefix *before* the `focus:` prefix. -->
通过在 `focus:` 前缀前添加响应式 `{screen}:` 前缀，focus 功能类也可以与 responsive 功能类相结合。

```html
<input class="... md:placeholder-gray-900 **md:focus:placeholder-red-600** ...">
```

<!-- ## Customizing -->
## 定制

<!-- ### Placeholder Colors -->
### 占位符文本颜色

<!-- By default Tailwind makes the entire [default color palette](/docs/customizing-colors#default-color-palette) available as placeholder colors. -->
默认情况下，Tailwind 整个 [默认调色板](/docs/customizing-colors#default-color-palette) 都可作为占位文本颜色。

<!-- You can [customize your color palette](/docs/colors#customizing) by editing `theme.colors` in your `tailwind.config.js` file, or customize just your placeholder colors in the `theme.textColor` section. -->
您可以通过编辑 `tailwind.config.js` 文件中的 `theme.colors` 来 [自定义您的调色板](/docs/colors#customizing)，或者在 `theme.textColor` 部分只自定义您的占位文本颜色。

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
-     placeholderColor: theme => theme('colors'),
+     placeholderColor: {
+       'primary': '#3490dc',
+       'secondary': '#ffed4a',
+       'danger': '#e3342f',
+     }
    }
  }
```

<!-- ### Variants -->
### 变体

<Variants plugin="placeholderColor" />

<!-- ### Disabling -->
### 禁用

<Disabling plugin="placeholderColor" />
